<template>
  <div class="dashboard">
    <el-card class="welcome-card">
      <template #header>
        <div class="welcome-header">
          <h2>欢迎使用 智能家居系统</h2>
          <el-button type="primary" @click="router.push('/devices')">
            <el-icon>
              <Plus />
            </el-icon>添加设备
          </el-button>
        </div>
      </template>
      <div class="dashboard-content">
        <div class="stats-cards">
          <el-card class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon>
                  <Monitor />
                </el-icon>
                <span>设备总数</span>
              </div>
            </template>
            <div class="stat-value">{{ stats.deviceCount || 0 }}</div>
          </el-card>

          <el-card class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon>
                  <Switch />
                </el-icon>
                <span>在线设备</span>
              </div>
            </template>
            <div class="stat-value">{{ stats.onlineCount || 0 }}</div>
          </el-card>

          <el-card class="stat-card">
            <template #header>
              <div class="stat-header">
                <el-icon>
                  <List />
                </el-icon>
                <span>任务数量</span>
              </div>
            </template>
            <div class="stat-value">{{ stats.taskCount || 0 }}</div>
          </el-card>
        </div>

        <el-card class="recent-devices">
          <template #header>
            <div class="card-header">
              <span>最近添加的设备</span>
              <el-button text type="primary" @click="router.push('/devices')">
                查看全部
              </el-button>
            </div>
          </template>
          <el-empty v-if="!recentDevices.length" description="暂无设备" />
          <el-table v-else :data="recentDevices" style="width: 100%">
            <el-table-column prop="name" label="设备名称" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="location" label="位置" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status ? 'success' : 'info'">
                  {{ row.status ? '在线' : '离线' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Plus, Monitor, Switch, List } from '@element-plus/icons-vue'
import { dashboardService } from '../api/services'
import { ElMessage } from 'element-plus'
import type { Device } from '../types'

const router = useRouter()

const stats = ref({
  deviceCount: 0,
  onlineCount: 0,
  taskCount: 0
})

const recentDevices = ref<Device[]>([])

const loadDashboardData = async () => {
  try {
    // 获取统计数据
    const statsResponse = await dashboardService.getDashboardStats()
    stats.value = statsResponse.data

    // 获取最近设备
    const devicesResponse = await dashboardService.getRecentDevices()
    recentDevices.value = devicesResponse.data
  } catch (error: any) {
    ElMessage.error(error.message || '加载数据失败')
  }
}

onMounted(async () => {
  await loadDashboardData()
})
</script>

<style scoped>
.dashboard {
  height: 100%;
}

.welcome-card {
  height: 100%;
}

.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.stat-card {
  background-color: #fff;
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  text-align: center;
  padding: 10px 0;
}

.recent-devices {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card {
  border-radius: 4px;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}
</style>